<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引入vue相应文件-->
    <script src="../js/vue.min.js"></script>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 引入ElementUI组件库 -->
    <script src="../elementUI/index.js"></script>
    <!-- 引入博客样式 -->
    <link rel="stylesheet" href="../commonCSS/blog.css">
</head>

<body>
    <div id="app" style="margin:50px;">
        <h1>Layout 布局</h1>
        <p>通过基础的 24 分栏，迅速简便地创建布局。</p>
        <h2>基础布局</h2>
        <p>使用单一分栏创建基础的栅格布局。</p>
        <p>通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。</p>
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="4">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
        </el-row>

        <h2>分栏间隔</h2>
        <p>分栏之间存在间隔。</p>
        <p>Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。</p>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>

        <h2>混合布局</h2>
        <p>通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。</p>
        <el-row :gutter="20">
            <el-col :span="16">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="4">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="16">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>


        <h2>分栏偏移</h2>
        <p>支持偏移指定的栏数。</p>
        <p>通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。</p>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="6" :offset="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6" :offset="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="6" :offset="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12" :offset="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>


        <h2>对齐方式</h2>
        <p>通过 flex 布局来对分栏进行灵活的对齐。</p>
        <p>将 type 属性赋值为 'flex'，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
        </p>
        <p>justify 属性默认是 start</p>
        <el-row type="flex" class="row-bg">
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="center">
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="end">
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="space-around">
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>


        <h2>响应式布局</h2>
        <p>参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。</p>
        <p>什么是响应式 Web 设计</p>
        <p>响应式 Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。例如，您先在计算机显示器上浏览一个网站，然后在智能手机上浏览，智能手机的屏幕尺寸远小于计算机显示器，但是你却没有感觉到任何差别，两者的用户体验几乎一样，这说明这个网站在响应式设计方面做得很好。
        </p>
        <p>xs:超小屏幕手机 (
            <768px)< /p>
                <p>sm:小屏幕平板 (≥768px)</p>
                <p>lg:中等屏幕桌面 (≥992px)</p>
                <p>xl:大屏幕桌面 (≥1200px)</p>
                <p>参考：</p>
                <a href="https://www.runoob.com/bootstrap/bootstrap-v2-responsive-design.html">Bootstrap 响应式设计</a>
                <a href="https://www.runoob.com/bootstrap/bootstrap-responsive-utilities.html">Bootstrap 响应式实用工具</a>
                <el-row :gutter="10">
                    <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
                        <div class="grid-content bg-purple"></div>
                    </el-col>
                    <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
                        <div class="grid-content bg-purple-light"></div>
                    </el-col>
                    <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
                        <div class="grid-content bg-purple"></div>
                    </el-col>
                    <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
                        <div class="grid-content bg-purple-light"></div>
                    </el-col>
                </el-row>

                <br>
                <br>
                <br>

                <h2>el-row 属性/Row Attributes</h2>

                <table class="common-table">
                    <thead>
                        <tr>
                            <th>参数</th>
                            <th>说明</th>
                            <th>类型</th>
                            <th>可选值</th>
                            <th>默认值</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>gutter</td>
                            <td>栅格间隔</td>
                            <td>number</td>
                            <td>—</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <td>type</td>
                            <td>布局模式，可选 flex，现代浏览器下有效</td>
                            <td>string</td>
                            <td>—</td>
                            <td>—</td>
                        </tr>
                        <tr>
                            <td>justify</td>
                            <td>flex 布局下的水平排列方式</td>
                            <td>string</td>
                            <td>start/end/center/space-around/space-between</td>
                            <td>start</td>
                        </tr>
                        <tr>
                            <td>align</td>
                            <td>flex 布局下的垂直排列方式</td>
                            <td>string</td>
                            <td>top/middle/bottom</td>
                            <td>top</td>
                        </tr>
                        <tr>
                            <td>tag</td>
                            <td>自定义元素标签</td>
                            <td>string</td>
                            <td>*</td>
                            <td>div</td>
                        </tr>
                    </tbody>
                </table>

                <br>
                <br>
                <br>


                <h2>el-col 属性/Col Attributes</h2>
                <table class="common-table">
                    <thead>
                        <tr>
                            <th>参数</th>
                            <th>说明</th>
                            <th>类型</th>
                            <th>可选值</th>
                            <th>默认值</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>span</td>
                            <td>栅格占据的列数</td>
                            <td>number</td>
                            <td>—</td>
                            <td>24</td>
                        </tr>
                        <tr>
                            <td>offset</td>
                            <td>栅格左侧的间隔格数</td>
                            <td>number</td>
                            <td>—</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <td>push</td>
                            <td>栅格向右移动格数</td>
                            <td>number</td>
                            <td>—</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <td>pull</td>
                            <td>栅格向左移动格数</td>
                            <td>number</td>
                            <td>—</td>
                            <td>0</td>
                        </tr>
                        <tr>
                            <td>xs</td>
                            <td><code>&lt;768px</code> 响应式栅格数或者栅格属性对象</td>
                            <td>number/object (例如： {span: 4, offset: 4})</td>
                            <td>—</td>
                            <td>—</td>
                        </tr>
                        <tr>
                            <td>sm</td>
                            <td><code>≥768px</code> 响应式栅格数或者栅格属性对象</td>
                            <td>number/object (例如： {span: 4, offset: 4})</td>
                            <td>—</td>
                            <td>—</td>
                        </tr>
                        <tr>
                            <td>md</td>
                            <td><code>≥992px</code> 响应式栅格数或者栅格属性对象</td>
                            <td>number/object (例如： {span: 4, offset: 4})</td>
                            <td>—</td>
                            <td>—</td>
                        </tr>
                        <tr>
                            <td>lg</td>
                            <td><code>≥1200px</code> 响应式栅格数或者栅格属性对象</td>
                            <td>number/object (例如： {span: 4, offset: 4})</td>
                            <td>—</td>
                            <td>—</td>
                        </tr>
                        <tr>
                            <td>xl</td>
                            <td><code>≥1920px</code> 响应式栅格数或者栅格属性对象</td>
                            <td>number/object (例如： {span: 4, offset: 4})</td>
                            <td>—</td>
                            <td>—</td>
                        </tr>
                        <tr>
                            <td>tag</td>
                            <td>自定义元素标签</td>
                            <td>string</td>
                            <td>*</td>
                            <td>div</td>
                        </tr>
                    </tbody>
                </table>
    </div>
</body>
<script>
    new Vue({
        el: '#app'
    });
</script>
<style>
    .el-row {
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    
    .el-col {
        border-radius: 4px;
    }
    
    .bg-purple-dark {
        background: #99a9bf;
    }
    
    .bg-purple {
        background: #d3dce6;
    }
    
    .bg-purple-light {
        background: #e5e9f2;
    }
    
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>

</html>